<template>
    <el-cascader
            size="small"
            :options="{$field}Option"
            v-model="selected{$field}Options"
            @change="handle{$field}Change">
    </el-cascader>
</template>
<script>
  import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';

  export default {
    data() {
      return {
        {$field}Option: regionData,
          selected{$field}Options: []
      }
    },
    mounted() {
    },
      computed: {
      },
      watch: {
          formFieldsData: {
              handler(data) {
                  if (data.{$field}) {
                      let region = data.{$field}.split(',');
                      let province = region[0];
                      let city = region[1];
                      let area = region[2];
                      this.selected{$field}Options[0] = TextToCode[province].code;
                      this.selected{$field}Options[1] = TextToCode[province][city].code;
                      this.selected{$field}Options[2] = TextToCode[province][city][area].code;
                  }
              },
              deep: true
          }
      },
    methods: {
      init() {
      },
        handle{$field}Change (value) {

            let region = '';
            value.forEach(item => {
                if(region){
                    region = region + ',' + CodeToText[item];
                }else{
                    region = CodeToText[item];
                }
            });
            this.formFieldsData.{$field} = region;
        }
    },
  }
</script>